// 导入搜索框模板
var search = require('../../template/search/search.js');
import selectFunc from '../../template/select/select.js';

// 获取应用实例
const app = getApp();

Page({
  data: {

    // 商品和标题高度  不同屏幕适配
    goodsHeight: null,
    goodsTitleHeight: null,

    // 商品选择框 参数
    select: {

      animationData: {},

      // 添加购物车 商品选择框 是否显示
      isShowGoodsSelect: false,

      // 购物车 商品数量 用户选中的
      GoodsNum: 0,

      // 点击的 是哪个 商品参数
      isBGC_id: 0,

      // 要让id 为几的 "尺寸" 改变背景色
      size_id: 0,

      // 商品剩余
      goods_surplus: 0
    },

    navLeftItems: [{
        id: 1,
        tree: {
          desc: "新品上市"
        }
      },
      {
        id: 2,
        tree: {
          desc: "斑马热销"
        }
      },
      {
        id: 3,
        tree: {
          desc: "床品"
        }
      },
      {
        id: 4,
        tree: {
          desc: "毛巾"
        }
      },
      {
        id: 5,
        tree: {
          desc: "香薰护理"
        }
      },
      {
        id: 6,
        tree: {
          desc: "地毯"
        }
      },
      {
        id: 7,
        tree: {
          desc: "餐厨"
        }
      },
      {
        id: 8,
        tree: {
          desc: "洗护"
        }
      },
    ],
    // 分类商品
    cate_goods: [{
        id: 1,
        title: '新品上市',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          }
        ]
      },
      {
        id: 2,
        title: '斑马热销',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          }
        ]
      },
      {
        id: 3,
        title: '床品',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
          {
            goodsImgUrl: '/images/goods/02.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥3288.00',
          },
        ]
      },
      {
        id: 4,
        title: '毛巾',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
        ]
      },
      {
        id: 5,
        title: '香薰护理',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
        ]
      },
      {
        id: 6,
        title: '地毯',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
        ]
      },
      {
        id: 7,
        title: '餐厨',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
        ]
      },
      {
        id: 8,
        title: '洗护',
        goods_list: [{
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
          {
            goodsImgUrl: '/images/goods/01.png',
            gooda_miaoshu: '菠萝斑马 豆绿真丝四件套顺滑 保养皮肤 100%桑蚕丝',
            price: '￥4288.00',
          },
        ]
      },

    ],

    // 左侧点击 是哪个item
    curNav: 1,

    // 滚动到哪个 右边分类
    listid: 1,

    // 是否显示遮挡层
    isShowSearchBox: search.isShowSearchBox
  }, //data end

  // 跳转到 详情页
  goToDetailPagr: function(e) {

    console.log(e);

    wx.navigateTo({
      url: '../../about_index/goods_detail/detail',
    })
  },

  // 滑动事件
  touchmove: function(e) {
    // scroll view 滚动的距离
    var scrollTop = e.detail.scrollTop;

    // 标题和商品高度
    var goodsH = this.data.goodsHeight;
    var titleH = this.data.goodsTitleHeight;

    // 当前分类的高度
    var current_cate = 0;

    // 遍历数组
    for (var i = 0; i < this.data.cate_goods.length; i++) {

      // 下一个分类的高度
      var next_cate = this.data.cate_goods[i].goods_list.length * goodsH + titleH;

      // 判断滚动距离 是否大于 当前分类 的高度 并且 下一个 分类商品的高度
      if (scrollTop > current_cate && scrollTop < next_cate + current_cate) {
        this.setData({
          curNav: this.data.cate_goods[i].id
        })
      }
      // 当前分类的高度 加上 下一个分类商品的高度 累计进行比较
      current_cate += next_cate;
    }
  },

  //------------------商品选择层--------
  // 点击 商品 类型 改变背景色
  changeBGC: selectFunc.changeBGC,

  // 点击 尺寸  改变背景色
  changeSize: selectFunc.changeSize,

  // 点击关闭按钮 隐藏 购物车 选择框
  closeBtn: selectFunc.closeBtn,

  // 点击减少 商品数量
  minusNum: selectFunc.minusNum,

  // 点击增加 商品数量
  addNum: selectFunc.addNum,

  // 点击展示 购买商品选择 框
  showGoodsSelectBox: selectFunc.showGoodsSelectBox,

  // 点击 下一步按钮
  next: selectFunc.next,
  //------------------商品选择层--------

  // 点击搜索框事件  显示遮挡层
  ShowSearchBox: search.ShowSearchBox,

  // 点击隐藏遮挡层
  hideSearchBox: search.hideSearchBox,

  // 点击左侧item 显示右边盒子 分类项
  switchRightTab: function(e) {
    // 获取item项的id，和数组的下标值  
    let id = e.target.dataset.id

    // 把点击到的某一项，设为当前index  
    this.setData({
      curNav: id,
      listid: id
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    var that = this;

    //创建节点选择器
    var query = wx.createSelectorQuery()
    query.select('.cate_title').boundingClientRect()
    query.exec(function(res) {
      // console.log(res[0].height)
      that.setData({
        goodsTitleHeight: res[0].height
      })
    })

    var query1 = wx.createSelectorQuery()
    query1.select('.cates_goods').boundingClientRect()
    query1.exec(function(res) {
      // console.log(res[0].height)
      that.setData({
        goodsHeight: res[0].height
      })
    })


    // 页面加载 时 初始化 商品选择
    this.setData({
      "select.size_id": 0,
      'select.isBGC_id': 0
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    console.log(app.globalData.goodsCateID)

    this.setData({
      curNav: app.globalData.goodsCateID + 1
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})